<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>攻略管理</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>

  <style>
    .search-container {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
    .form-section {
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 20px;
      padding-bottom: 15px;
    }
    .form-section-title {
      font-weight: bold;
      color: #409EFF;
      margin-bottom: 15px;
      font-size: 16px;
    }
    .table-container {
      margin-top: 20px;
    }
    .action-buttons {
      display: flex;
      gap: 5px;
    }
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
    .dialog-footer {
      text-align: right;
    }
    .status-tag {
      margin-right: 5px;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 搜索框-->
  <div class="search-container">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-input v-model="searchForm.title" placeholder="请输入攻略标题" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="searchForm.destination" placeholder="请输入目的地" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option label="已发布" value="published"></el-option>
          <el-option label="草稿" value="draft"></el-option>
          <el-option label="审核中" value="review"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加攻略</el-button>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>

  <!-- 数据列表-->
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
      <el-table-column prop="guideId" label="攻略ID" width="80"></el-table-column>
      <el-table-column prop="visitorId" label="游客ID" width="80"></el-table-column>
      <el-table-column prop="title" label="攻略标题" width="200">
        <el-table-column prop="visitorsName" label="游客Name" width="200">
      </el-table-column>
      <el-table-column prop="destination" label="目的地" width="120"></el-table-column>
      <el-table-column prop="days" label="推荐天数" width="100"></el-table-column>
      <el-table-column prop="budget" label="人均预算" width="100"></el-table-column>
      <el-table-column prop="season" label="推荐季节" width="100"></el-table-column>
      <el-table-column label="统计数据" width="150">
        <template slot-scope="scope">
          <div>浏览: {{ scope.row.viewCount }}</div>
          <div>点赞: {{ scope.row.likeCount }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)" class="status-tag">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <div class="action-buttons">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
      </el-table-column>
    </el-table>
  </div>

  <!-- 添加/更新表格-->
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" :before-close="handleDialogClose">
    <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="max-height: 60vh; overflow-y: auto;">
      <div class="form-section">
        <div class="form-section-title">基本信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="游客ID" prop="visitorId">
              <el-input v-model="form.visitorId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者ID" prop="visitorsName">
              <el-input v-model="form.visitorsName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="攻略标题" prop="title">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地" prop="destination">
              <el-input v-model="form.destination" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="推荐游玩天数" prop="days">
              <el-input-number v-model="form.days" :min="1" :max="30"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人均预算" prop="budget">
              <el-input v-model="form.budget" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="推荐季节" prop="season">
              <el-select v-model="form.season" placeholder="请选择季节">
                <el-option label="春季" value="春季"></el-option>
                <el-option label="夏季" value="夏季"></el-option>
                <el-option label="秋季" value="秋季"></el-option>
                <el-option label="冬季" value="冬季"></el-option>
                <el-option label="全年" value="全年"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="0" value="草稿"></el-option>
                <el-option label="1" value="已发布"></el-option>
                <el-option label="2" value="审核中"></el-option>
                <el-option label="3" value="已删除"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="form-section">
        <div class="form-section-title">攻略内容</div>
        <el-form-item label="攻略正文" prop="content">
          <el-input type="textarea" v-model="form.content" autocomplete="off" :rows="6"></el-input>
        </el-form-item>
      </div>

      <div class="form-section">
        <div class="form-section-title">统计信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="浏览量" prop="viewCount">
              <el-input-number v-model="form.viewCount" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点赞数" prop="likeCount">
              <el-input-number v-model="form.likeCount" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button @click="resetForm('form')">重 置</el-button>
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 分页-->
  <div class="pagination-container">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20,100,200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        activeIndex: "1",
        tableData: [], // 列表数据
        currentPage: 1, // 分页参数 第几页
        pageSize: 10, // 分页参数 每页显示的总条数
        total: 0, // 分页参数，列表总条数
        loading: false, // 加载状态
        searchForm: {
          title: '',
          destination: '',
          status: '',

        },
        dialogFormVisible: false,
        title: '添加攻略',
        form: {
          guideId: null,
          visitorId: null,
          title: '',
          destination: '',
          days: 1,
          budget: '',
          season: '',
          content: '',
          viewCount: 0,
          likeCount: 0,
          status: 'draft',
          createTime: null,
          updateTime: null,
          visitorsName:''
        },
        rules: {
          visitorId: [
            { required: true, message: '请输入作者Id', trigger: 'blur' }
          ],
          visitorsName: [
            { required: true, message: '请输入作者名字', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入攻略标题', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ],
          destination: [
            { required: true, message: '请输入目的地', trigger: 'blur' }
          ],
          days: [
            { required: true, message: '请输入推荐游玩天数', trigger: 'blur' }
          ],
          budget: [
            { required: true, message: '请输入人均预算', trigger: 'blur' }
          ],
          season: [
            { required: true, message: '请选择推荐季节', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入攻略正文', trigger: 'blur' },
            { min: 10, message: '攻略正文至少10个字符', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ]
        }
      }
    },
    // 页面加载的时候执行
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.loading = true;
        let _this = this;
        axios.post('/guides/queryByPage', {
          "pageNo": this.currentPage,
          "pageSize": this.pageSize,
          "data": this.searchForm
        })
                .then(function(response) {
                  if (response.data.code == 200) {
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function(error) {
                  console.log(error);
                  _this.$message.error('数据加载失败');
                })
                .finally(function() {
                  _this.loading = false;
                });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadData();
      },
      // 搜索功能
      search() {
        this.currentPage = 1;
        this.loadData();
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let uri = '/guides/add';
            if (this.title == '更新信息') {
              uri = '/guides/update';
            }
            let _this = this;
            axios.post(uri, this.form)
                    .then(function(response) {
                      if (response.data.code == 200) {
                        _this.$message({
                          message: '操作成功',
                          type: 'success'
                        });
                        _this.loadData();
                        _this.dialogFormVisible = false;
                      } else {
                        _this.$message.error('操作失败: ' + response.data.msg)
                      }
                    })
                    .catch(function(error) {
                      console.log(error);
                      _this.$message.error('操作出错: ' + error.message);
                    });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 处理添加,弹出添加对话框
      handleAdd() {
        this.dialogFormVisible = true;
        this.title = '添加攻略';
        this.form = {
          guideId: null,
          visitorId: null,
          title: '',
          destination: '',
          days: 1,
          budget: '',
          season: '',
          content: '',
          viewCount: 0,
          likeCount: 0,
          status: 'draft',
          createTime: null,
          updateTime: null
        };
      },
      // 处理更新
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.title = '更新信息';
        this.form = JSON.parse(JSON.stringify(row));
      },
      // 处理删除
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该攻略, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
                .then(() => {
                  let _this = this;
                  axios.delete('/guides/deleteById?guideId=' + row.guideId)
                          .then(function(response) {
                            if (response.data.code == 200) {
                              _this.$message({
                                message: '删除成功',
                                type: 'success'
                              });
                              _this.loadData();
                            } else {
                              _this.$message.error('删除失败: ' + response.data.msg)
                            }
                          })
                          .catch(function(error) {
                            console.log(error);
                            _this.$message.error('删除出错: ' + error.message);
                          });
                }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        });
      },
      // 处理对话框关闭
      handleDialogClose(done) {
        this.$confirm('确认关闭？未保存的数据将会丢失')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      // 格式化日期
      formatDate(date) {
        if (!date) return '';
        const d = new Date(date);
        return d.getFullYear() + '-' +
                (d.getMonth() + 1).toString().padStart(2, '0') + '-' +
                d.getDate().toString().padStart(2, '0') + ' ' +
                d.getHours().toString().padStart(2, '0') + ':' +
                d.getMinutes().toString().padStart(2, '0');
      },
      // 获取状态文本
      getStatusText(status) {
        const statusMap = {
          'published': '已发布',
          'draft': '草稿',
          'review': '审核中'
        };
        return statusMap[status] || status;
      },
      // 获取状态标签类型
      getStatusType(status) {
        const typeMap = {
          'published': 'success',
          'draft': 'info',
          'review': 'warning'
        };
        return typeMap[status] || 'info';
      }
    }
  });
</script>
</body>
</html>